<script setup>
import { onBeforeMount, ref, watch } from "vue";
import { RouterLink, RouterView, useRouter } from "vue-router";
import { useUserStore } from "./stores/stores";
import { ResponseStatus } from "./api/request";
import adminAPI from "./api/admin";
import SimpleDialog from "./components/simple-dialog/SimpleDialog.vue";

// 主题设置
const APPTheme = ref("light");
document.documentElement.setAttribute("data-theme", APPTheme.value);
watch(APPTheme, (nv) => {
  document.documentElement.setAttribute("data-theme", nv);
});

function refreshRouterView() {
  const pathStartIndex = window.location.href.lastIndexOf("#/");
  const path = window.location.href.substring(pathStartIndex + "#".length);
  router.push(path);
}

const router = useRouter();
const loginDialog = ref();
onBeforeMount(async () => {
  const userStore = useUserStore();
  router.beforeEach((to) => {
    if (to.path === "/") {
      return true;
    }
    return userStore.login;
  });

  const verifyTokenResult = await adminAPI.verifyToken();
  if (verifyTokenResult.data) {
    userStore.login = true;
    refreshRouterView();
  } else {
    router.push("/");
    loginDialog.value.show();
  }
});

async function userLogin(formData) {
  const result = await adminAPI.login(formData.username, formData.password);
  alert(result.message);
  if (result.status === ResponseStatus.SUCCESS) {
    useUserStore().login = true;
    loginDialog.value.hide();
    refreshRouterView();
  }
}
</script>

<template>
  <SimpleDialog
    ref="loginDialog"
    title="登录"
    :closeButton="false"
    :contentCenter="true"
  >
    <FormKit
      type="form"
      submit-label="登录"
      :submit-attrs="{
        inputClass: 'w-full flex justify-center',
        wrapperClass: 'flex items-center justify-center',
        ignore: false,
      }"
      @submit="userLogin"
    >
      <FormKit
        type="text"
        name="username"
        label="用户名"
        validation="required"
      ></FormKit>
      <FormKit
        type="password"
        name="password"
        label="密码"
        validation="required"
      ></FormKit>
    </FormKit>
  </SimpleDialog>

  <div class="drawer md:drawer-open h-full">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <!-- 内容 -->
    <div class="drawer-content overflow-hidden">
      <div class="flex flex-col w-full h-full max-h-full">
        <!-- 导航栏 -->
        <header class="navbar bg-base-100 shadow border h-20">
          <div class="flex-1">
            <!-- 收起侧边栏 -->
            <label
              for="my-drawer"
              class="drawer-button btn btn-square btn-ghost md:hidden"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                class="inline-block h-5 w-5 stroke-current"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
                ></path>
              </svg>
            </label>
            <h2 class="text-2xl font-bold p-4">{{ $route.name }}</h2>
          </div>
          <div class="flex-none"></div>
        </header>
        <!-- 内容 -->
        <div class="grow flex flex-col overflow-auto">
          <main
            class="grow w-full bg-base-200/25 backdrop-blur box-border p-6 pb-4 flex flex-col"
          >
            <div class="grow flex flex-col">
              <RouterView class="shadow" />
            </div>
          </main>
          <footer class="px-6 mb-4">
            <div class="divider">&copy;2024 尘跃</div>
          </footer>
        </div>
      </div>
    </div>
    <!-- 侧边栏 -->
    <aside class="drawer-side md:shadow border z-50">
      <label
        for="my-drawer"
        aria-label="close sidebar"
        class="drawer-overlay"
      ></label>
      <!-- 内容 -->
      <div
        class="max-w-full h-full overflow-x-hidden overflow-y-auto flex flex-col justify-between bg-base-100"
      >
        <!-- 上边 -->
        <div>
          <div class="flex justify-center m-4">
            <img class="w-32" src="./assets/logo.png" alt="logo" />
          </div>
          <ul class="menu menu-md rounded-box w-56">
            <!-- <li><RouterLink to="/">主页</RouterLink></li> -->
            <li>
              <RouterLink to="/dashboard">
                <v-icon name="ri-dashboard-2-line"></v-icon>
                <span>仪表盘</span>
              </RouterLink>
            </li>
            <li>
              <h2 class="menu-title">内容</h2>
              <ul>
                <li>
                  <RouterLink to="/article">
                    <v-icon name="ri-article-line"></v-icon>
                    <span>文章</span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/page">
                    <v-icon name="ri-pages-line"></v-icon>
                    <span>页面</span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/comment">
                    <v-icon name="la-comment-dots-solid"></v-icon>
                    <span>评论</span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/file">
                    <v-icon name="oi-file-directory"></v-icon>
                    <span>附件</span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/link">
                    <v-icon name="ri-link"></v-icon>
                    <span>友链</span>
                  </RouterLink>
                </li>
              </ul>
            </li>
            <li>
              <h2 class="menu-title">外观</h2>
              <ul>
                <li>
                  <RouterLink to="/menu">
                    <v-icon name="ri-menu-2-fill"></v-icon>
                    <span>菜单</span>
                  </RouterLink>
                </li>
              </ul>
            </li>
            <li>
              <h2 class="menu-title">系统</h2>
              <ul>
                <li>
                  <RouterLink to="/character">
                    <v-icon name="ri-shield-user-line"></v-icon>
                    <span>角色管理</span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/user">
                    <v-icon name="ri-user-3-line"></v-icon>
                    <span> 用户管理 </span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/setting">
                    <v-icon name="ri-settings-3-line"></v-icon>
                    <span> 设置 </span>
                  </RouterLink>
                </li>
                <li>
                  <RouterLink to="/about">
                    <v-icon name="la-exclamation-solid"></v-icon>
                    <span>关于</span>
                  </RouterLink>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 下边 -->
        <div class="box-border p-4">
          <label class="swap swap-rotate">
            <!-- this hidden checkbox controls the state -->
            <input type="checkbox" />

            <!-- sun icon -->
            <svg
              class="swap-on h-10 w-10 fill-current"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              @click="APPTheme = 'dracula'"
            >
              <path
                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
              />
            </svg>

            <!-- moon icon -->
            <svg
              class="swap-off h-10 w-10 fill-current"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              @click="APPTheme = 'light'"
            >
              <path
                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
              />
            </svg>
          </label>
        </div>
      </div>
    </aside>
  </div>
</template>
